<template>
  <div class="menu-builder">
    <div class="menu-builder-header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/static-site/static-site/' }">静态网站管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ siteName }} - 菜单构建器</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 菜单选择器 -->
    <div class="menu-selector">
      <div class="selector-left">
        <el-select v-model="selectedMenuId" placeholder="选择要编辑的菜单" @change="handleMenuChange">
          <el-option
            v-for="menu in menuOptions"
            :key="menu.id"
            :label="menu.name"
            :value="menu.id"
          />
        </el-select>
        <el-button type="primary" @click="showCreateMenuDialog = true">新建菜单</el-button>
      </div>
      <div class="selector-right">
        <el-button type="success" :loading="saving" @click="saveMenu">保存菜单</el-button>
        <el-button type="info" @click="previewMenu">预览菜单</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="menu-builder-content">
      <!-- 左侧：可选择的项目 -->
      <div class="left-panel">
        <div class="panel-title">添加菜单项</div>

        <!-- 分类页面 -->
        <div class="menu-items-group">
          <div class="group-header" @click="toggleGroup('categories')">
            <i :class="groupStates.categories ? 'el-icon-arrow-down' : 'el-icon-arrow-right'" />
            <span>分类页面</span>
          </div>
          <div v-show="groupStates.categories" class="group-content">
            <div class="search-box">
              <el-input
                v-model="categorySearch"
                placeholder="搜索分类..."
                size="small"
                prefix-icon="el-icon-search"
                clearable
              />
            </div>
            <div class="items-list">
              <div
                v-for="category in filteredCategories"
                :key="category.id"
                class="menu-item-option"
                @click="selectCategory(category)"
              >
                <el-checkbox v-model="selectedCategories" :label="category.id">
                  {{ category.name }}
                </el-checkbox>
              </div>
            </div>
            <div class="group-actions">
              <el-button size="small" type="primary" @click="addSelectedCategories">添加到菜单</el-button>
              <el-button size="small" @click="selectAllCategories">全选</el-button>
            </div>
          </div>
        </div>

        <!-- 页面 -->
        <div class="menu-items-group">
          <div class="group-header" @click="toggleGroup('pages')">
            <i :class="groupStates.pages ? 'el-icon-arrow-down' : 'el-icon-arrow-right'" />
            <span>页面</span>
          </div>
          <div v-show="groupStates.pages" class="group-content">
            <div class="search-box">
              <el-input
                v-model="pageSearch"
                placeholder="搜索页面..."
                size="small"
                prefix-icon="el-icon-search"
                clearable
              />
            </div>
            <div class="items-list">
              <div
                v-for="page in filteredPages"
                :key="page.id"
                class="menu-item-option"
                @click="selectPage(page)"
              >
                <el-checkbox v-model="selectedPages" :label="page.id">
                  {{ page.title }}
                </el-checkbox>
              </div>
            </div>
            <div class="group-actions">
              <el-button size="small" type="primary" @click="addSelectedPages">添加到菜单</el-button>
              <el-button size="small" @click="selectAllPages">全选</el-button>
            </div>
          </div>
        </div>

        <!-- 自定义链接 -->
        <div class="menu-items-group">
          <div class="group-header" @click="toggleGroup('custom')">
            <i :class="groupStates.custom ? 'el-icon-arrow-down' : 'el-icon-arrow-right'" />
            <span>自定义链接</span>
          </div>
          <div v-show="groupStates.custom" class="group-content">
            <div class="custom-link-form">
              <el-form :model="customLink" label-width="80px" size="small">
                <el-form-item label="链接地址">
                  <el-input v-model="customLink.url" placeholder="https://example.com" />
                </el-form-item>
                <el-form-item label="链接文字">
                  <el-input v-model="customLink.title" placeholder="链接文字" />
                </el-form-item>
                <el-form-item label="图标">
                  <el-input v-model="customLink.icon" placeholder="图标CSS类名" />
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="customLink.newTab">新窗口打开</el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="addCustomLink">添加到菜单</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：菜单结构 -->
      <div class="right-panel">
        <div class="panel-title">菜单结构</div>
        <div class="menu-structure">
          <div v-if="!selectedMenuId" class="empty-state">
            <i class="el-icon-menu" />
            <p>请先选择一个菜单</p>
          </div>
          <div v-else-if="menuItems.length === 0" class="empty-state">
            <i class="el-icon-plus" />
            <p>从左侧添加菜单项</p>
          </div>
          <draggable
            v-else
            v-model="menuItems"
            :options="dragOptions"
            class="menu-items-container"
            @start="onDragStart"
            @end="onDragEnd"
          >
            <div
              v-for="item in menuItems"
              :key="item.id"
              class="menu-item-card"
              :class="{ 'editing': item.editing }"
            >
              <div class="menu-item-header">
                <div class="drag-handle">
                  <i class="el-icon-s-unfold" />
                </div>
                <div class="menu-item-info">
                  <div class="menu-item-title">{{ item.title }}</div>
                  <div class="menu-item-url">{{ item.url }}</div>
                </div>
                <div class="menu-item-actions">
                  <el-button type="text" @click="editMenuItem(item)">
                    <i class="el-icon-edit" />
                  </el-button>
                  <el-button type="text" @click="deleteMenuItem(item)">
                    <i class="el-icon-delete" />
                  </el-button>
                </div>
              </div>

              <!-- 编辑表单 -->
              <div v-if="item.editing" class="menu-item-edit-form">
                <el-form :model="item" label-width="80px" size="small">
                  <el-form-item label="链接文字">
                    <el-input v-model="item.title" />
                  </el-form-item>
                  <el-form-item label="链接地址">
                    <el-input v-model="item.url" />
                  </el-form-item>
                  <el-form-item label="图标">
                    <el-input v-model="item.icon_class" placeholder="图标CSS类名" />
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox v-model="item.open_in_new_tab">新窗口打开</el-checkbox>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="small" @click="saveMenuItem(item)">保存</el-button>
                    <el-button size="small" @click="cancelEditMenuItem(item)">取消</el-button>
                  </el-form-item>
                </el-form>
              </div>

              <!-- 子菜单 -->
              <draggable
                v-if="item.children && item.children.length > 0"
                v-model="item.children"
                :options="dragOptions"
                class="submenu-items-container"
              >
                <div
                  v-for="child in item.children"
                  :key="child.id"
                  class="submenu-item-card"
                  :class="{ 'editing': child.editing }"
                >
                  <div class="menu-item-header">
                    <div class="drag-handle">
                      <i class="el-icon-s-unfold" />
                    </div>
                    <div class="menu-item-info">
                      <div class="menu-item-title">{{ child.title }}</div>
                      <div class="menu-item-url">{{ child.url }}</div>
                    </div>
                    <div class="menu-item-actions">
                      <el-button type="text" @click="editMenuItem(child)">
                        <i class="el-icon-edit" />
                      </el-button>
                      <el-button type="text" @click="deleteMenuItem(child, item)">
                        <i class="el-icon-delete" />
                      </el-button>
                    </div>
                  </div>

                  <!-- 子菜单编辑表单 -->
                  <div v-if="child.editing" class="menu-item-edit-form">
                    <el-form :model="child" label-width="80px" size="small">
                      <el-form-item label="链接文字">
                        <el-input v-model="child.title" />
                      </el-form-item>
                      <el-form-item label="链接地址">
                        <el-input v-model="child.url" />
                      </el-form-item>
                      <el-form-item label="图标">
                        <el-input v-model="child.icon_class" placeholder="图标CSS类名" />
                      </el-form-item>
                      <el-form-item>
                        <el-checkbox v-model="child.open_in_new_tab">新窗口打开</el-checkbox>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" size="small" @click="saveMenuItem(child)">保存</el-button>
                        <el-button size="small" @click="cancelEditMenuItem(child)">取消</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </draggable>
            </div>
          </draggable>
        </div>
      </div>
    </div>

    <!-- 创建菜单对话框 -->
    <el-dialog title="创建新菜单" :visible.sync="showCreateMenuDialog" width="500px">
      <el-form :model="newMenu" label-width="100px">
        <el-form-item label="菜单名称">
          <el-input v-model="newMenu.name" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select v-model="newMenu.menu_type" placeholder="请选择菜单类型">
            <el-option label="主导航" value="main" />
            <el-option label="页脚导航" value="footer" />
            <el-option label="侧边导航" value="sidebar" />
            <el-option label="面包屑导航" value="breadcrumb" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showCreateMenuDialog = false">取消</el-button>
        <el-button type="primary" @click="createMenu">创建</el-button>
      </div>
    </el-dialog>

    <!-- 预览对话框 -->
    <el-dialog title="菜单预览" :visible.sync="showPreviewDialog" width="80%">
      <div class="menu-preview">
        <div class="preview-menu-container">
          <div v-for="item in menuItems" :key="item.id" class="preview-menu-item">
            <div class="preview-item-content">
              <i v-if="item.icon_class" :class="item.icon_class" />
              <a :href="item.url" :target="item.open_in_new_tab ? '_blank' : '_self'">
                {{ item.title }}
              </a>
            </div>
            <div v-if="item.children && item.children.length > 0" class="preview-submenu">
              <div v-for="child in item.children" :key="child.id" class="preview-submenu-item">
                <i v-if="child.icon_class" :class="child.icon_class" />
                <a :href="child.url" :target="child.open_in_new_tab ? '_blank' : '_self'">
                  {{ child.title }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="showPreviewDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {
  createStaticSiteMenu,
  getStaticSiteMenuTree,
  getStaticSiteMenuOptions,
  batchSaveMenuStructure
} from '@/api/spider/static_site'

export default {
  name: 'MenuBuilder',
  components: {
    draggable
  },
  data() {
    return {
      siteId: null,
      siteName: '',
      selectedMenuId: null,
      menuOptions: [],
      menuItems: [],
      saving: false,

      // 左侧面板状态
      groupStates: {
        categories: true,
        pages: true,
        custom: true
      },

      // 数据源
      categories: [],
      pages: [],

      // 搜索
      categorySearch: '',
      pageSearch: '',

      // 选中的项目
      selectedCategories: [],
      selectedPages: [],

      // 自定义链接
      customLink: {
        url: '',
        title: '',
        icon: '',
        newTab: false
      },

      // 拖拽选项
      dragOptions: {
        animation: 150,
        handle: '.drag-handle',
        ghostClass: 'ghost',
        chosenClass: 'chosen',
        dragClass: 'drag'
      },

      // 对话框状态
      showCreateMenuDialog: false,
      showPreviewDialog: false,

      // 新菜单数据
      newMenu: {
        name: '',
        menu_type: 'main'
      }
    }
  },
  computed: {
    filteredCategories() {
      if (!this.categorySearch) return this.categories
      return this.categories.filter(cat =>
        cat.name.toLowerCase().includes(this.categorySearch.toLowerCase())
      )
    },
    filteredPages() {
      if (!this.pageSearch) return this.pages
      return this.pages.filter(page =>
        page.title.toLowerCase().includes(this.pageSearch.toLowerCase())
      )
    }
  },
  created() {
    this.siteId = this.$route.query.site_id
    this.siteName = this.$route.query.site_name || '未知网站'
    const menuId = this.$route.query.menu_id

    if (!this.siteId) {
      this.$message.error('缺少网站ID参数')
      this.$router.push('/static-site/static-site/')
      return
    }

    this.loadData().then(() => {
      // 如果有菜单ID参数，自动选择该菜单
      if (menuId) {
        this.selectedMenuId = parseInt(menuId)
        this.handleMenuChange(this.selectedMenuId)
      }
    })
  },
  methods: {
    async loadData() {
      try {
        // 加载菜单选项
        await this.loadMenuOptions()
        // 加载可用的分类和页面
        await this.loadAvailableItems()
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败')
      }
    },

    async loadMenuOptions() {
      try {
        const response = await getStaticSiteMenuOptions(this.siteId)
        if (response.success) {
          this.menuOptions = response.data.menus
          this.categories = response.data.categories
          this.pages = response.data.pages
        }
      } catch (error) {
        console.error('获取菜单选项失败:', error)
      }
    },

    async loadAvailableItems() {
      // 这里可以加载更多可用的项目
      // 目前从 getStaticSiteMenuOptions 已经获取了基本数据
    },

    async handleMenuChange(menuId) {
      if (!menuId) return
      try {
        const response = await getStaticSiteMenuTree(menuId)
        if (response.success) {
          this.menuItems = this.processMenuItems(response.data)
        }
      } catch (error) {
        console.error('获取菜单树失败:', error)
        this.$message.error('获取菜单结构失败')
      }
    },

    processMenuItems(items) {
      return items.map(item => ({
        ...item,
        editing: false,
        children: item.children ? this.processMenuItems(item.children) : []
      }))
    },

    toggleGroup(groupName) {
      this.groupStates[groupName] = !this.groupStates[groupName]
    },

    selectCategory(category) {
      const index = this.selectedCategories.indexOf(category.id)
      if (index > -1) {
        this.selectedCategories.splice(index, 1)
      } else {
        this.selectedCategories.push(category.id)
      }
    },

    selectPage(page) {
      const index = this.selectedPages.indexOf(page.id)
      if (index > -1) {
        this.selectedPages.splice(index, 1)
      } else {
        this.selectedPages.push(page.id)
      }
    },

    selectAllCategories() {
      this.selectedCategories = this.filteredCategories.map(cat => cat.id)
    },

    selectAllPages() {
      this.selectedPages = this.filteredPages.map(page => page.id)
    },

    addSelectedCategories() {
      const categoriesToAdd = this.categories.filter(cat =>
        this.selectedCategories.includes(cat.id)
      )

      categoriesToAdd.forEach(category => {
        this.addMenuItem({
          id: `cat_${category.id}_${Date.now()}`,
          title: category.name,
          url: this.generateCategoryUrl(category),
          link_type: 'category',
          target_category: category.id,
          icon_class: '',
          open_in_new_tab: false,
          editing: false,
          children: []
        })
      })

      this.selectedCategories = []
    },

    addSelectedPages() {
      const pagesToAdd = this.pages.filter(page =>
        this.selectedPages.includes(page.id)
      )

      pagesToAdd.forEach(page => {
        this.addMenuItem({
          id: `page_${page.id}_${Date.now()}`,
          title: page.title,
          url: this.generatePageUrl(page),
          link_type: 'page',
          target_page: page.id,
          icon_class: '',
          open_in_new_tab: false,
          editing: false,
          children: []
        })
      })

      this.selectedPages = []
    },

    addCustomLink() {
      if (!this.customLink.url || !this.customLink.title) {
        this.$message.warning('请填写链接地址和链接文字')
        return
      }

      this.addMenuItem({
        id: `custom_${Date.now()}`,
        title: this.customLink.title,
        url: this.customLink.url,
        link_type: 'custom',
        icon_class: this.customLink.icon,
        open_in_new_tab: this.customLink.newTab,
        editing: false,
        children: []
      })

      // 清空表单
      this.customLink = {
        url: '',
        title: '',
        icon: '',
        newTab: false
      }
    },

    addMenuItem(item) {
      this.menuItems.push(item)
    },

    generateCategoryUrl(category) {
      // 优先使用真实链接
      if (category.inner_link_url) {
        return category.inner_link_url
      }
      // 生成相对链接 - 这里需要从某个地方获取site信息
      // 可以从菜单选项中获取，或者单独请求
      return `#category-${category.slug}`
    },

    generatePageUrl(page) {
      if (page.actual_url) {
        return page.actual_url
      }
      // 生成相对链接 - 这里需要从某个地方获取site信息
      return `#page-${page.slug}`
    },

    editMenuItem(item) {
      item.editing = true
    },

    saveMenuItem(item) {
      item.editing = false
      // 这里可以添加保存逻辑
    },

    cancelEditMenuItem(item) {
      item.editing = false
      // 这里可以添加取消逻辑，恢复原始数据
    },

    deleteMenuItem(item, parent = null) {
      this.$confirm('确定要删除此菜单项吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (parent) {
          // 删除子菜单项
          const index = parent.children.indexOf(item)
          if (index > -1) {
            parent.children.splice(index, 1)
          }
        } else {
          // 删除主菜单项
          const index = this.menuItems.indexOf(item)
          if (index > -1) {
            this.menuItems.splice(index, 1)
          }
        }
      }).catch(() => {
        // 用户取消
      })
    },

    async createMenu() {
      if (!this.newMenu.name) {
        this.$message.warning('请输入菜单名称')
        return
      }

      try {
        const response = await createStaticSiteMenu({
          site: this.siteId,
          name: this.newMenu.name,
          menu_type: this.newMenu.menu_type,
          is_active: true,
          sort_order: 0
        })

        if (response.success) {
          this.$message.success('菜单创建成功')
          this.showCreateMenuDialog = false
          this.newMenu = { name: '', menu_type: 'main' }
          await this.loadMenuOptions()
          this.selectedMenuId = response.data.id
          await this.handleMenuChange(this.selectedMenuId)
        } else {
          this.$message.error('创建失败：' + response.msg)
        }
      } catch (error) {
        console.error('创建菜单失败:', error)
        this.$message.error('创建菜单失败')
      }
    },

    async saveMenu() {
      if (!this.selectedMenuId) {
        this.$message.warning('请先选择一个菜单')
        return
      }

      this.saving = true
      try {
        // 这里需要实现保存菜单结构的逻辑
        // 可能需要创建一个新的API来批量更新菜单项
        await this.saveMenuStructure()
        this.$message.success('菜单保存成功')
      } catch (error) {
        console.error('保存菜单失败:', error)
        this.$message.error('保存菜单失败')
      } finally {
        this.saving = false
      }
    },

    async saveMenuStructure() {
      // 将前端的菜单项格式转换为后端可以处理的格式
      const convertMenuItems = (items) => {
        return items.map(item => ({
          title: item.title,
          url: item.url,
          link_type: item.link_type,
          target_page: item.target_page,
          target_category: item.target_category,
          icon_class: item.icon_class || '',
          is_active: item.is_active !== false,
          open_in_new_tab: item.open_in_new_tab || false,
          children: item.children ? convertMenuItems(item.children) : []
        }))
      }

      const menuData = convertMenuItems(this.menuItems)

      try {
        const response = await batchSaveMenuStructure(this.selectedMenuId, menuData)
        if (response.success) {
          this.$message.success(response.msg)
          // 重新加载菜单结构以获取最新的ID
          await this.handleMenuChange(this.selectedMenuId)
        } else {
          this.$message.error('保存失败：' + response.msg)
        }
      } catch (error) {
        console.error('保存菜单结构失败:', error)
        this.$message.error('保存菜单结构失败')
      }
    },

    previewMenu() {
      this.showPreviewDialog = true
    },

    onDragStart() {
      // 拖拽开始
    },

    onDragEnd() {
      // 拖拽结束，更新排序
      this.updateSortOrder()
    },

    updateSortOrder() {
      // 更新排序
      this.menuItems.forEach((item, index) => {
        item.sort_order = index
        if (item.children) {
          item.children.forEach((child, childIndex) => {
            child.sort_order = childIndex
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.menu-builder {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.menu-builder-header {
  margin-bottom: 20px;
}

.menu-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.selector-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.selector-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-builder-content {
  display: flex;
  gap: 20px;
  height: calc(100vh - 200px);
}

.left-panel {
  width: 350px;
  background: white;
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-y: auto;
}

.right-panel {
  flex: 1;
  background: white;
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-y: auto;
}

.panel-title {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
  position: sticky;
  top: 0;
  z-index: 1;
}

.menu-items-group {
  border-bottom: 1px solid #e4e7ed;
}

.group-header {
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.group-header:hover {
  background: #f5f7fa;
}

.group-content {
  padding: 0 20px 15px;
}

.search-box {
  margin-bottom: 10px;
}

.items-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.menu-item-option {
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item-option:last-child {
  border-bottom: none;
}

.group-actions {
  display: flex;
  gap: 8px;
}

.custom-link-form {
  margin-top: 10px;
}

.menu-structure {
  padding: 20px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  display: block;
}

.menu-items-container {
  min-height: 100px;
}

.menu-item-card {
  background: #fafafa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.menu-item-card.editing {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.menu-item-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: move;
}

.drag-handle {
  color: #999;
  margin-right: 10px;
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.menu-item-info {
  flex: 1;
}

.menu-item-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.menu-item-url {
  font-size: 12px;
  color: #666;
}

.menu-item-actions {
  display: flex;
  gap: 5px;
}

.menu-item-edit-form {
  padding: 15px;
  border-top: 1px solid #e4e7ed;
  background: white;
}

.submenu-items-container {
  margin-left: 30px;
  margin-top: 10px;
}

.submenu-item-card {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 8px;
}

.submenu-item-card.editing {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 拖拽样式 */
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.chosen {
  background: #409eff;
  color: white;
}

.drag {
  background: #409eff;
  color: white;
}

/* 预览样式 */
.menu-preview {
  max-height: 500px;
  overflow-y: auto;
}

.preview-menu-container {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
}

.preview-menu-item {
  margin-bottom: 15px;
}

.preview-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: white;
  border-radius: 4px;
  font-weight: 500;
}

.preview-item-content a {
  color: #333;
  text-decoration: none;
}

.preview-item-content a:hover {
  color: #409eff;
}

.preview-submenu {
  margin-left: 20px;
  margin-top: 8px;
}

.preview-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: white;
  border-radius: 4px;
  margin-bottom: 5px;
  font-size: 14px;
}

.preview-submenu-item a {
  color: #666;
  text-decoration: none;
}

.preview-submenu-item a:hover {
  color: #409eff;
}
</style>
